<template>
  <a-card>
    <div class="MarkTitle">
      <label class="newInfoTb"></label>
      <label class="newInfo">最新招标信息</label>
    </div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6">
            <a-form-item label="输入查询">
              <a-input placeholder="请输入标题关键字/编号查询" v-model="queryParam.keyword"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6">
            <a-form-item label="信息类型">
              <a-select placeholder="请选择信息类型" v-model="queryParam.biddingTypeId">
                <a-select-option v-for="(item,index) in optionDataList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8">
            <a-form-item label="发布时间">
              <a-range-picker @change="releaseTime" format="YYYY-MM-DD" v-model="searchDate" style="width:100%;"/>
            </a-form-item>
          </a-col>
          <a-col :md="4">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-tabs @change="callback">
      <a-tab-pane key="1">
        <span slot="tab">
          已发布
        </span>
        <publishedlist :listData="listData" :loadData="loadData" :loading="loading" @resetPage="resetPage"></publishedlist>
        <a-pagination
          v-if="listData"
          v-model="pagination.current"
          :pageSize="pagination.pageSize"
          :showTotal="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
          :total="pagination.total"
          :pageSizeOptions="pagination.pageSizeOptions"
          :showQuickJumper="true"
          :showSizeChanger="true"
          @change="handleListChange"
          @showSizeChange="handleListChange"
          class="paging"></a-pagination>
      </a-tab-pane>
      <a-tab-pane key="0" force-render>
        <span slot="tab">
          有异常
        </span>
        <abnormallist :listData="listData" :loadData="loadData" :loading="loading" @resetPage="resetPage"></abnormallist>
        <a-pagination
          v-if="listData"
          v-model="pagination.current"
          :pageSize="pagination.pageSize"
          :showTotal="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
          :total="pagination.total"
          :pageSizeOptions="pagination.pageSizeOptions"
          :showQuickJumper="true"
          :showSizeChanger="true"
          @change="handleListChange"
          @showSizeChange="handleListChange"
          class="paging">
        </a-pagination>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
  import publishedlist from './modules/PublishedList'
  import abnormallist from './modules/AbnormalList'
  import {
    filterObj
  } from '@/utils/util'

  import {
    getBidList,
    getSearchOption
  } from '@/api/api'

  export default {
    components: {
      publishedlist,
      abnormallist
    },
    data() {
      return {
        loading: false,
        key: 1,
        listData: [],
        searchDate: null,
        optionDataList: [],
        queryParam: {},
        /* 分页参数 */
        pagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          total: 0
        }
      }
    },
    created() {
      this.loadData()
      this.loadOptionData()
    },
    methods: {
      resetPage() {
        this.searchReset()
      },
      // 列表分页
      handleListChange(current, pageSize) {
        this.pagination.current = current
        if (pageSize != null && pageSize != '') {
          this.pagination.pageSize = pageSize
        }
        this.loadData(current, pageSize)
      },
      // 标讯类型
      loadOptionData() {
        getSearchOption().then((res) => {
          if (res.success) {
            this.optionDataList = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      // 列表数据和条件查询
      loadData(current, pageSize) {
        if (current === 1) {
          this.pagination.current = 1
        }
        let params = this.getQueryParams() // 查询条件
        params.status = this.key
        params.pageSize = pageSize
        params.pageNo = current
        this.loading = true
        getBidList(params).then((res) => {
          if (res.success) {
            this.loading = false
            this.listData = res.result.records
            this.pagination.total = res.result.total
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      getQueryParams() {
        // 获取查询条件
        let sqp = {}
        if (this.superQueryParams) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
        return filterObj(param)
      },
      searchQuery() {
        this.loadData()
      },
      searchReset() {
        this.queryParam = {}
        this.searchDate = []
        this.pagination = {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          total: 0
        }
        this.loadData()
      },
      callback: function(key) {
        this.key = key
        this.searchReset()
      },
      releaseTime: function(time, timeString) {
        this.queryParam.startDate = timeString[0]
        this.queryParam.endDate = timeString[1]
      }
    }
  }
</script>
<style scoped>
  .newInfo {
    font-size: 16px;
    color: #1890ff;
  }

  .newInfoTb {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 6px 3px 0;
    background: #1890ff;
  }

  .MarkTitle {
    margin: 6px 0 30px 0;
  }
  .paging{
    float:right;
    padding-top:20px;
  }
</style>
